<template>
  <div class="index">
    <a-spin tip="Loading..." :spinning="pageLoading" size="large" :delay="500">
      <div class="spin-content">
        <div class="vidage">
          <video class="vidage-video" preload="metadata" loop autoplay muted>
            <source src="/bg.jpeg" type="image/jpeg">
            <source src="/bg.mp4" type="video/mp4">
          </video>

          <div class="container">
            <h2 class="title">{{ sentence.content }}</h2>
            <p class="subtitle"> ( {{ sentence.source }} ) </p>
          </div>

          <div class="handle-button">
            <a-button type="primary"
                      shape="round"
                      size="large"
                      ghost
                      :loading="loading"
                      @click="changeSentence">切换</a-button>

            <a-divider type="vertical" />

            <a-button type="danger"
                      shape="round"
                      size="large"
                      ghost
                      :loading="copyLoading"
                      @click="copySentence">复制</a-button>
          </div>

        </div>
      </div>
    </a-spin>
  </div>
</template>

<script>
  import app from "../../app"
  export default {
    name: "index",
    head: ()=> ({ title: app.name }),
    async asyncData({ $axios, store, error }){
      const resp = await $axios.$get(`${app.api}/api/${app.apiVersion}/random/`);
      let sentence = resp.code === 200 ? resp.data : "请求失败";
      return { sentence }
    },
    beforeCreate() {
      this.pageLoading = true
    },
    data: ()=>({
      loading: false,
      copyLoading: false,
      pageLoading: false,
    }),
    methods: {
      // 切换
      changeSentence(e){
        e.preventDefault();
        this.loading = true
        this.$axios.$get(`${app.api}/api/${app.apiVersion}/random/`)
          .then((resp)=>{
            if (resp.code === 200) {
              this._data.sentence = resp.data;
              this.loading = false
            }else {
              this.loading = false
              this.$message.warning(resp.msg)
            }
          }).catch((err)=>{
            // TODO 前端错误处理
            this.loading = false
          })
      },
      // 复制
      copySentence(e){
        let _this = this;
        _this.copyLoading = true;
        this.$copyText(_this.sentence.content).then((res)=>{
          _this.$axios.$post(`${app.api}/api/${app.apiVersion}/copy/`, { id: _this.sentence.id })
            .then((resp)=>{
              if (resp.code === 200) {
                _this.copyLoading = false;
                _this.$message.success("复制 "+_this.sentence.content+" 成功")
              }else {
                _this.copyLoading = false;
                _this.$message.warning("复制失败")
              }
            }).catch((err)=>{
              // 错误处理
            _this.copyLoading = false;
          })
        }, (err)=>{
          _this.copyLoading = false;
          _this.$message.warning("复制失败")
          console.log(err)
        })
      }
    },
    mounted() {
      this.pageLoading = false
    }
  }
</script>

<style scoped>
  .container {
    margin-top: -46%;
    height: 60vh;
    z-index: 10;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .title{
    user-select: none;
    font-size: 2rem;
    margin: 0 auto;
    color: #1890ff;
  }
  .title:not(.is-spaced) + .subtitle {
    margin-top: 1.5rem;
    color: #1890ff;
  }
  .handle-button{
    margin-top: 50px;
    text-align: center;
    margin-bottom: 10rem;
  }
  .vidage-video{
    width: 100%;
    z-index: 1;
    height:100%;
    object-fit: cover
  }
  @media screen and (max-width: 1023px){

    .container {
      margin-top:-110%;
      height: auto;
    }
    .vidage{
      height: 550px;
    }
    .vidage-video{
      margin-top: 56px;
    }
    .title{
      font-size: 18px;
    }
    .title:not(.is-spaced) + .subtitle {
      margin-top: 20px;
      font-size: 14px;
    }
    .handle-button{
      margin-top: 20%;
      margin-bottom: 10rem;
      z-index: 99;
    }
  }
</style>
